<template>
	<div class="wrapper">
		<!-- 选择地址 -->
		<div class="address-box" @click="clickToAddress()">
			<div class="user-box flex">
				<div class="flex-8">
					<div v-if="!address.id">请选择地址</div>
					<div v-else>
						<div class="user-address">
							<!-- 省市区 -->
							<div class="flex flex-a-c">
								<span class="default" v-if="address.isDefault">默认</span>
								<div class="address-list" v-if="address.consigneeAddressPath.length != 0">
									<span class="address-item" v-for="(item, index) in address.consigneeAddressPath"
										:key="index">
										{{ item }}
									</span>
								</div>
							</div>
							<!-- 详细地址 -->
							<div class="user-address-detail wes-2">
								{{ address.detail }}
							</div>
							<!-- 姓名 手机号 -->
							<div>
								<span>{{ address.name }}</span>
								<span class="mobile">{{ address.mobile | secrecyMobile }}</span>
							</div>
						</div>
					</div>
				</div>
				<u-icon name="arrow-right" style="color: #bababa"></u-icon>
			</div>
			<!-- 背景 -->
			<div class="bar"></div>
		</div>

		<!-- 开团信息 -->
		<view class="group-box" v-if="isAssemble">
			<view class="group-title">
				<span v-if="pintuanFlage">你正在开团购买</span>
				<span v-else>为你加入仅差<span>{{ routerVal.parentOrder.toBeGroupedNum }}</span>人的团购买</span>
			</view>
			<view class="group">
				<view>
					<u-image borderRadius="50%" shape="square" class="head-img" width="81rpx" height="81rpx"
						:src="masterWay.face"></u-image>
					<view class="btn-one">团长</view>
				</view>
				<view class="line"> </view>
				<view>
					<!-- 如果有最后一名，显示最后一名，没有最后一名，显示等待参团 -->
					<u-image class="head-img" v-if="endWay.face" :src="endWay.face" borderRadius="50%" shape="square"
						width="81rpx" height="81rpx">
						<view slot="loading"></view>
					</u-image>
					<u-image class="head-img" borderRadius="50%" shape="square" v-else width="81rpx" height="81rpx"
						:src="endWay.face"></u-image>

					<view class="wait">{{ endWay.nickname || "等待参团" }}</view>
				</view>
			</view>
		</view>

		<!-- 店铺商品信息 -->
		<div class="box box2" v-for="(item, index) in orderMessage.cartList" :key="index">
			<div @click="navigateToStore(item)">
				<div class="store-name">
					<span>{{ item.storeName }}</span>
				</div>
			</div>
			<div class="promotionNotice">{{ item.promotionNotice || "" }}</div>
			<div class="flex goods-item" v-for="(val, i) in item.skuList" :key="i">
				<div class="goods-image" @click="
            navigateTo(
              '/pages/product/goods?id=' +
                val.goodsSku.id +
                '&goodsId=' +
                val.goodsSku.goodsId
            )
          " :span="3">
					<u-image borderRadius="10rpx" width="200rpx" height="200rpx" :src="val.goodsSku.thumbnail" alt />
				</div>
				<div @click="
            navigateTo(
              '/pages/product/goods?id=' +
                val.goodsSku.id +
                '&goodsId=' +
                val.goodsSku.goodsId
            )
          " class="goods-detail">
					<div class="flex">
						<p class="goods-name">{{ val.goodsSku.goodsName }}</p>
						<span class="nums">x{{ val.num }}</span>
					</div>
					<p class="goods-prices">
						<span class='hb-money'>
							<span class="goods-price price">{{ formatPrice(val.memberPrice)[0] }}</span>
							<span>.{{ formatPrice(val.memberPrice)[1] }}</span>
						</span>
					</p>
				</div>
			</div>
			<u-row>
				<u-col v-if="orderMessage.cartTypeEnum != 'VIRTUAL'" :offset="0" :span="9" @click="shippingFlag = true">
					配送
				</u-col>
				<u-col v-if="orderMessage.cartTypeEnum != 'VIRTUAL'" :span="3" textAlign="right"
					@click="shippingFlag = true">
					{{ shippingText }}
				</u-col>
			</u-row>
			<u-row>
				<u-col :offset="0" :span="4" class="tl" style="text-align: left">备注信息</u-col>
				<u-col :span="8" textAlign="right">
					<u-input style="text-align: right" class="uinput" v-model="remarkVal[index].remark" />
				</u-col>
			</u-row>
		</div>

		<!-- 发票信息 -->
		<invoices :res="receiptList" @callbackInvoice="callbackInvoice" v-if="invoiceFlag" />
		<u-select v-model="shippingFlag" :list="shippingMethod" @confirm="confirm"></u-select>

		<div class="box box5" v-if="orderMessage.priceDetailDTO">
			<div>
				<u-row>
					<u-col :span="9">商品合计</u-col>
					<u-col :span="3" textAlign="right">
						<span>{{ orderMessage.priceDetailDTO.goodsPrice | unitPrice }}</span>
					</u-col>
				</u-row>
			</div>
			<div v-if="shippingValue=='LOGISTICS'">
				<u-row>
					<u-col v-if="orderMessage.cartTypeEnum != 'VIRTUAL'" :span="7">运费</u-col>
					<u-col v-if="orderMessage.cartTypeEnum != 'VIRTUAL'" :span="5" class="tr tipsColor"
						textAlign="right">
						<span v-if="orderMessage.priceDetailDTO.freightPrice == 0">包邮</span>
						<span v-else>{{ orderMessage.priceDetailDTO.freightPrice | unitPrice }}</span>
					</u-col>
				</u-row>
			</div>
			<div>
				<u-row>
					<u-col :span="9">优惠金额</u-col>
					<u-col :span="3" textAlign="right" v-if="orderMessage.priceDetailDTO.couponPrice">
						<span class="main-color">
							-{{ orderMessage.priceDetailDTO.couponPrice | unitPrice }}</span>
					</u-col>
					<u-col :span="3" textAlign="right" v-else>0.00</u-col>
				</u-row>
			</div>
			<div>
				<u-row>
					<u-col :span="6">活动优惠</u-col>
					<u-col :span="6" class="tr tipsColor" textAlign="right">
						<span
							v-if="orderMessage.priceDetailDTO.discountPrice">-{{ orderMessage.priceDetailDTO.discountPrice | unitPrice }}</span>
						<span v-else>0.00</span>
					</u-col>
				</u-row>
			</div>
		</div>

		<!-- 配送地区没有提示 -->
		<div class="notSupportFreight" v-if="notSupportFreight.length != 0">
			<u-notice-bar style="width: 100%" :volume-icon="false" mode="horizontal" :list="notSupportFreightGoodsList">
			</u-notice-bar>
		</div>

		<!-- 结账 -->

		<div class="box6 mp-iphonex-bottom" v-if="orderMessage.priceDetailDTO">
			<div class="tabbar-left">
				<div v-if="!orderMessage.priceDetailDTO.payPoint" class="number">
					<span class='hb-money'>
						<span class="price">{{
							  formatPrice(orderMessage.priceDetailDTO.memberPricetotal)[0]
							}}</span>
						<span>.{{ formatPrice(orderMessage.priceDetailDTO.memberPricetotal)[1] }}
						</span>
					</span>
				</div>
				<span v-else class="number"><span style="margin-right: 10rpx">{{
            orderMessage.priceDetailDTO.payPoint | unitPrice
          }}</span>积分</span>
			</div>
			<div class="navRiv" @click="createTradeFun()">
				<div class="tabbar-right">提交订单</div>
			</div>
		</div>
		<pay-methods origin="order" :sn="sn" :type="type" :rechargeType="6" closeTip='1' ref="payMethods"></pay-methods>
	</div>
</template>
<script>
	import * as API_Trade from "@/api/trade";
	import * as API_Address from "@/api/address";
	import * as API_Order from "@/api/order";
	import invoices from "@/pages/order/invoice/setInvoice";
	import LiLiWXPay from "@/js_sdk/lili-pay/wx-pay.js";
	import storage from "@/utils/storage.js"
	import payMethods from "@/components/pay-methods/pay-methods.vue"
	export default {
		onLoad: function(val) {
			this.routerVal = val;
		},
		components: {
			invoices,
			payMethods
		},
		data() {
			return {
				sn: "", // 订单号
				type: "", // 订单类型
				businessState: "",
				invoiceFlag: false, //开票开关
				shippingValue: "LOGISTICS",
				shippingText: "物流",
				shippingFlag: false,
				shippingMethod: [{
						value: "LOGISTICS",
						label: "物流",
					},
					{
						value: "SELF_PICK_UP",
						label: "自提",
					}
				],
				isAssemble: false, //是否拼团
				couponNums: "", //结算页面优惠券数量
				selectAddressId: "",
				routerVal: "",
				params: {},
				// 优惠劵
				couponList: "",
				// 已选地址
				address: "",
				// 发票信息
				receiptList: "",
				// 店铺信息
				orderMessage: "",
				data: "",
				// 存储备注
				remarkVal: [],
				detail: "", //返回的所有数据
				endWay: "", //最后一个参团人
				masterWay: "", //团长信息
				pintuanFlage: true, //是开团还是拼团
				notSupportFreight: [], //不支持运费
				notSupportFreightGoodsList: ["以下商品超出配送范围："],
			};
		},
		filters: {
			/**
			 * 发票收据类型
			 */
			receiptType(type) {
				switch (type) {
					case "VATORDINARY":
						return "增值税普通发票";
					case "ELECTRO":
						return "电子普通发票";
					case "VATOSPECIAL":
						return "增值税专用发票";
					default:
						return "不开发票";
				}
			},
		},

		/**
		 * 监听返回
		 */
		onBackPress(e) {
			if (e.from == "backbutton") {
				let routes = getCurrentPages();
				let curRoute = routes[routes.length - 1].options;
				routes.forEach((item) => {
					if (
						item.route == "pages/tabbar/cart/cartList" ||
						item.route.indexOf("pages/product/goods") != -1
					) {
						uni.redirectTo({
							url: item.route,
						});
					}
				});

				if (curRoute.addId) {
					uni.reLaunch({
						url: "/pages/tabbar/cart/cartList",
					});
				} else {
					uni.navigateBack();
				}
				return true; //阻止默认返回行为
			}
		},

		onShow() {
			this.businessState = storage.getBusiness()
			console.log(this.businessState, "111111");
			uni.showLoading({
				mask: true,
			});
			this.getOrderList();
			uni.hideLoading();
			if (this.routerVal.way == "PINTUAN") {
				this.isAssemble = true;
				this.routerVal.parentOrder = JSON.parse(
					decodeURIComponent(this.routerVal.parentOrder)
				);
				this.pintuanWay();
			}

		},
		mounted() {},

		methods: {
			confirm(e) {
				this.shippingValue = e[0].value
				this.shippingText = e[0].label
				if (e[0].value == "SELF_PICK_UP") {
					this.$set(this.orderMessage.priceDetailDTO, "memberPricetotal", this.orderMessage.priceDetailDTO
						.memberPrice - this.orderMessage.priceDetailDTO.freightPrice)
				} else {
					this.$set(this.orderMessage.priceDetailDTO, "memberPricetotal", this.orderMessage.priceDetailDTO
						.memberPrice)
				}
				this.shippingFlag = false;
			},
			// 格式化金钱  1999 --> [1999,00]
			formatPrice(val) {
				if (typeof val == "undefined") {
					return val;
				}
				return val.toFixed(2).split(".");
			},
			//发票回调 选择发票之后刷新购物车
			async callbackInvoice(val) {
				this.invoiceFlag = false;
				this.receiptList = val;
				if (val) {
					let submit = {
						way: this.routerVal.way,
						...this.receiptList,
					};
					let receipt = await API_Order.getReceipt(submit);
					if (receipt.data.success) {
						this.shippingFlag = false;
						this.getOrderList();
					}
				}
			},

			// 跳转到店铺
			navigateToStore(val) {
				uni.navigateTo({
					url: "/pages/product/shopPage?id=" + val.storeId,
				});
			},
			// 点击跳转地址
			clickToAddress() {
				this.navigateTo(
					`/pages/mine/address/address?from=cart&way=${
          this.routerVal.way
        }&parentOrder=${encodeURIComponent(JSON.stringify(this.routerVal.parentOrder))}`
				);
			},

			// 判断团长以及团员信息
			pintuanWay() {
				const {
					memberId
				} = this.routerVal.parentOrder;

				const userInfo = this.$options.filters.isLogin();
				if (memberId) {
					this.endWay = userInfo;
					this.masterWay = this.routerVal.parentOrder;
					this.pintuanFlage = false;
				} else {
					this.pintuanFlage = true;
					this.masterWay = userInfo;
				}
			},
			// 判断发票
			invoice() {
				this.invoiceFlag = true;
			},

			// 领取优惠券
			GET_Discount() {
				// 循环店铺id,商品id获取优惠券
				let store = [];
				let skus = [];
				let selectedCoupon = [];
				if (this.orderMessage.platformCoupon)
					selectedCoupon.push(this.orderMessage.platformCoupon.memberCoupon.id);
				if (
					this.orderMessage.storeCoupons &&
					Object.keys(this.orderMessage.storeCoupons)[0]
				) {
					let storeMemberCouponsId = Object.keys(this.orderMessage.storeCoupons)[0];
					let storeCouponId = this.orderMessage.storeCoupons[storeMemberCouponsId]
						.memberCoupon.id;
					selectedCoupon.push(storeCouponId);
				}
				this.orderMessage.cartList.forEach((item) => {
					item.skuList.forEach((sku) => {
						store.push(sku.storeId);
						skus.push(sku.goodsSku.id);
					});
				});
				store = Array.from(new Set(store));
				skus = Array.from(new Set(skus));
				uni.setStorage({
					key: "totalPrice",
					data: this.orderMessage.priceDetailDTO.goodsPrice,
				});
				this.navigateTo(
					`/pages/cart/coupon/index?way=${this.routerVal.way}&storeId=${store}&skuId=${skus}&selectedCoupon=${selectedCoupon}`
				);
			},

			/**
			 * 跳转
			 */
			navigateTo(url) {
				uni.navigateTo({
					url,
				});
			},

			/**
			 * 提交订单准备支付
			 */

			// 创建订单
			createTradeFun() {
				// 防抖
				this.$u.throttle(() => {
					if (!this.address.id) {
						uni.showToast({
							title: "请选择地址",
							duration: 2000,
							icon: "none",
						});
						return false;
					}
					//  创建订单
					let client;
					// #ifdef H5
					client = "H5";
					// #endif
					// #ifdef MP-WEIXIN
					client = "WECHAT_MP";
					// #endif
					// #ifdef APP-PLUS
					client = "APP";
					// #endif

					let submit = {
						clientType: client,
						way: this.routerVal.way,
						remark: this.remarkVal,
						parentOrderSn: "",
						owner: "RECHARGE",
						deliveryMethod: this.shippingValue, //物流/自提
					};
					// 如果是拼团并且当前用户不是团长
					this.routerVal.parentOrder && this.routerVal.parentOrder.orderSn ?
						(submit.parentOrderSn = this.routerVal.parentOrder.orderSn) :
						delete submit.parentOrderSn;

					/**
					 * 创建订单
					 */
					API_Trade.createTrade(submit).then((res) => {
						if (res.data.success) {
							uni.showToast({
								title: "创建订单成功!",
								duration: 2000,
								icon: "none",
							});
							// 如果当前价格为0跳转到订单列表
							if (this.orderMessage.priceDetailDTO.billPrice == 0) {
								uni.redirectTo({
									url: "/pages/order/myOrder?status=0",
								});
							} else {
								this.sn = res.data.result.sn
								this.type = "TRADE"
								setTimeout(() => {
									this.$refs.payMethods.showMethodPopup()
								}, 20)
							}
						} else {
							uni.showToast({
								title: res.data.message,
								duration: 2000,
								icon: "none",
							});
						}
					});
				}, 3000);
			},

			/**
			 * 微信小程序中直接支付
			 */
			async pay(sn) {
				new LiLiWXPay({
					sn: sn,
					price: this.orderMessage.priceDetailDTO.billPrice,
				}).pay();
			},

			/**
			 * 获取用户地址
			 */
			getUserAddress() {
				// 如果没有商品选择地址的话 则选择 默认地址
				API_Address.getAddressDefault().then((res) => {
					if (res.data.result) {
						res.data.result.consigneeAddressPath = res.data.result.consigneeAddressPath.split(
							","
						);
						this.address = res.data.result;
					}
				});
			},

			// 获取结算参数
			getOrderList() {
				this.notSupportFreight = [];
				// 获取结算参数
				API_Trade.getCheckoutParams(this.routerVal.way).then((res) => {
					if (res.data.result.skuList.length <= 0) {
						uni.redirectTo({
							url: "/pages/order/myOrder?status=0",
						});
					}
					res.data.result.cartList.forEach((item, index) => {
						this.remarkVal[index] = {
							remark: item.remark,
							storeId: item.storeId,
						};
					});
					this.orderMessage = res.data.result;
					if (this.orderMessage.skuList[0].cartType === "VIRTUAL") {
						this.shippingValue = "SELF_PICK_UP"
					}
					this.orderMessage.priceDetailDTO.memberPricetotal = this.orderMessage.priceDetailDTO
						.memberPrice
					/**
					 * 为了避免路径传值在h5中超出限制问题
					 * 这块将可用的优惠券以及不可用的优惠券放入到vuex里面进行存储
					 */
					this.$store.state.canUseCoupons = res.data.result.canUseCoupons;
					this.$store.state.cantUseCoupons = res.data.result.cantUseCoupons;

					if (!res.data.result.memberAddress.id) {
						// 获取会员默认地址
						this.getUserAddress();
					} else {
						this.address = res.data.result.memberAddress;
						res.data.result.memberAddress.consigneeAddressPath = res.data.result.memberAddress
							.consigneeAddressPath.split(
								","
							);
					}

					if (
						res.data.result.notSupportFreight &&
						res.data.result.notSupportFreight.length != 0
					) {
						this.notSupportFreight = res.data.result.notSupportFreight;

						res.data.result.notSupportFreight.forEach((item) => {
							this.notSupportFreightGoodsList[0] += item.goodsSku.goodsName;
						});
					}
				});
			},

			//
		},
	};
</script>
<style scoped>
	page {
		background: #ededed !important;
	}
</style>
<style scoped lang="scss">
	.flex-8 {
		flex: 8;
	}

	.main-color {
		font-weight: bold;
	}

	.uinput {
		/deep/ input {
			text-align: right;
		}
	}

	.promotionNotice {
		font-size: 24rpx;
		margin: 20rpx 0;
		color: $aider-light-color;
	}

	.nums {
		flex: 2;
		color: $light-color;

		text-align: center;
	}

	.wait {
		font-size: 22rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #cccccc;
		text-align: center;
	}

	.line {
		margin-left: 14rpx;
		margin-right: 14rpx;
		margin-bottom: 50rpx;
		width: 143rpx;
		border-bottom: 2px dotted #999;
	}

	.tabbar-left {
		margin-left: 32rpx;
	}

	.btn-one,
	.wait {
		margin-top: 14rpx;
	}

	.btn-one {
		width: 100rpx;
		height: 40rpx;
		background: $light-color;
		border-radius: 20rpx;
		font-size: 22rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		text-align: left;
		color: #ffffff;
		text-align: center;
		line-height: 40rpx;
	}

	.head-img {
		width: 81rpx;
		height: 81rpx;
		margin: 0 auto;
	}

	.group-title {
		text-align: center;
		font-size: 28rpx;
		font-weight: 400;
		color: $light-color;
	}

	.group-box {
		height: 242rpx;
		align-items: center;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		background: #fff;
	}

	.group {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tr {
		text-align: right;
	}

	.tl {
		text-align: left;
	}

	/deep/ .u-col-3 {
		text-align: right;
	}

	.bar {
		height: 4rpx;
		overflow: hidden;
		width: 100%;
		background: url("@/pages/order/imgs/line.png") no-repeat;
	}

	.box2 {
		margin-top: 20rpx;
	}

	.notSupportFreight {
		position: fixed;

		bottom: calc(100rpx + env(safe-area-inset-bottom));
		// #ifdef H5
		bottom: 100rpx;
		// #endif
		display: flex;
		align-items: center;
		left: 0;
		background: #fdf6ec;
		height: 100rpx;
		width: 100%;
		transition: 0.35s;

		>.tips {
			margin: 0 32rpx;
		}
	}

	/deep/ .u-notice-bar-wrap {
		width: 100% !important;
	}

	.box6 {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100rpx;
		overflow: hidden;
		line-height: 100rpx;
		margin-bottom: 0px !important;
		background: #fff;
		color: #333;
		display: flex;
		justify-content: space-between;
	}

	.tabbar-right {
		margin-top: 10rpx;
		height: 80rpx;
		color: #fff;
		line-height: 80rpx;
		background: linear-gradient(91deg, $light-color 1%, $aider-light-color 99%);
		padding: 0 44rpx;
		text-align: center;
		border-radius: 400px;
		margin-right: 32rpx;
	}

	.sp_tag {
		display: inline;
		background: #f2f2f2;
		padding: 0 20rpx 0 10rpx;
		height: 20rpx;
		line-height: 20rpx;
		font-size: 24rpx;
		color: #262626;
		border-radius: 0.4em;
	}

	.goods-promotion {
		float: left;
		width: 75%;
		margin: 4rpx 0;
	}

	.sp_tag_plain {
		margin-left: 8rpx;
		padding: 0 6rpx 0 6rpx;
		background: #fff;
		border: 1px solid $main-color;
		font-size: 24rpx;
		color: $main-color;
		border-radius: 50px;
	}

	.sp_tag_plain:nth-of-type(1) {
		margin-left: 0;
	}

	.goods-name {
		flex: 8;
		font-size: 28rpx;
	}

	.sp_type {
		color: $u-tips-color;
		padding: 8rpx 0;
		font-size: 24rpx;
	}

	.number {
		color: $main-color;
		font-size: 26rpx;
		font-weight: bold;

		>span {
			font-size: 36rpx;
		}
	}

	.goods-prices {
		margin: 10rpx 0;
		color: $main-color;
		font-size: 28rpx;
		font-weight: bold;

		>.goods-price {
			font-size: 38rpx;
			padding: 0 2rpx;
		}
	}

	.box {
		border-radius: 40rpx;
		overflow: hidden;
		background: #fff;
		margin-bottom: 20rpx;
		color: #666;
		padding: 0 32rpx;
	}

	.wrapper {
		height: auto;
		background: #f7f7f7;
		padding-bottom: 200rpx;
		overflow: auto !important;
	}

	.store-name {
		margin-top: 32rpx;
		font-weight: 400;
		color: #333333;
	}

	/deep/ .u-col {
		padding: 36rpx 0 !important;
	}

	/deep/ .u-col-3,
	.tipsColor {
		color: #333;
	}

	.goods-image {
		text-align: left;
		overflow: hidden;
	}

	.default {
		background: $main-color;
		font-size: 24rpx;
		border-radius: 8rpx;
		padding: 0rpx 12rpx;
		color: #fff;
		margin-right: 20rpx;
	}

	.address-box {
		border-radius: 40rpx;
		border-top-left-radius: 0 !important;
		border-top-right-radius: 0 !important;
		overflow: hidden;
		background: #fff;
		margin-bottom: 20rpx;
		color: #666;
	}

	.address-item {
		font-weight: normal;
		letter-spacing: 1rpx;
	}

	.user-box {
		padding: 32rpx;
	}

	.user-address-detail {
		color: #333;
		font-size: 38rpx;
		font-weight: bold;
		margin: 20rpx 0;
		letter-spacing: 1rpx;
	}

	.mobile {
		margin-left: 20rpx;
	}

	.price {
		font-size: 50rpx !important;
		margin: 0 2rpx;
	}

	.goods-detail {
		display: flex;
		flex-direction: column;

		justify-content: center;
		flex: 8;
		margin-left: 20rpx !important;

		>p {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}

	.goods-item {
		margin: 20rpx 0;
	}
</style>
